<template>
  <!--  收文、发文 已归档列表 -->
  <div ref="contentRefs" class="content">
    <!-- 筛选 -->
    <div class="top-tool">
      <!-- 时间&状态 -->
      <div class="tool-left">
        <DatePicker
          ref="datePicker"
          @changeBeginTime="changeBeginTime"
          @changeEndTime="changeEndTime"
        ></DatePicker>
        <a-select
          v-model:value="tagValue"
          style="width: 160px; border-radius: 4px"
          placeholder="选择标签"
        >
          <template #suffixIcon>
            <svg-icon icon-class="icon_select_down" class-name="icon-select-down"></svg-icon>
          </template>
          <a-select-option v-for="(item, i) in archivedLabelArr" :key="i" :value="item.id">{{
            item.labelName
          }}</a-select-option>
        </a-select>
      </div>
      <!-- 搜索&重置 -->
      <div class="tool-right">
        <a-input-group compact>
          <a-select v-model:value="searchTitle">
            <template #suffixIcon>
              <svg-icon icon-class="icon_select_down" class-name="icon-select-down"></svg-icon>
            </template>
            <a-select-option v-for="(item, i) in searchTitleArr" :key="i" :value="item.value">{{
              item.text
            }}</a-select-option>
          </a-select>
          <a-input
            v-model:value="keyword"
            style="width: 200px; height: 36px; border-radius: 0 4px 4px 0; margin-right: 8px"
            placeholder="请输入关键字查询"
            @change="toChange()"
          >
            <template #prefix>
              <svg-icon icon-class="icon_search" class-name="icon-search"></svg-icon>
            </template>
          </a-input>
        </a-input-group>
        <a-button type="primary" @click="searchBtnClick">搜索</a-button>
        <a-button @click="resetBtnClick">重置</a-button>
      </div>
    </div>
    <!-- 批量操作 -->
    <!-- <div class="center-tool">
      <div
        v-for="(item, i) in batchBtnsArr"
        :key="i"
        :class="['center-tool-btn', selectedRowKeys.length > 0 ? 'btn-active' : '']"
        @click="batchBtnClick(i)"
      >
        <svg-icon :icon-class="item.svgName" :class-name="item.className"></svg-icon>
        <span>{{ item.btnName }}</span>
      </div>
    </div> -->
    <!-- 表格  -->
    <div class="table-bg">
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        loading="false"
        :pagination="false"
        table-layout="fixed"
      >
        <template #bodyCell="{ column, text, record }">
          <a-tooltip
            v-if="column.dataIndex !== 'operation'"
            :get-popup-container="() => contentRefs"
            placement="top"
            :title="
              column.dataIndex === 'labelName'
                ? record.labelName && record.labelName.length > 3
                  ? record.labelName
                  : ''
                : column.dataIndex === 'documentTitle'
                ? text && text.length > 1
                  ? text
                  : ''
                : column.dataIndex === 'documentNum'
                ? text && text.length > 13
                  ? text
                  : ''
                : ['drafter', 'distributor', 'handle'].indexOf(column.dataIndex) !== -1
                ? text && text.length > 4
                  ? text
                  : ''
                : ''
            "
          >
            <div v-if="column.dataIndex === 'tags'">
              {{ record.labelName.length }}{{ record.labelName }}
            </div>
            <div v-else>
              <span>{{ text && text.length > 0 ? text : '--' }}</span>
            </div>
          </a-tooltip>
          <div v-else class="editable-row-operations">
            <span style="margin-right: 12px">
              <a class="operation-normal" @click="gotoDetail(record)">详情</a>
            </span>

            <!-- <span class="operation-normal" @click="deleteItem(record.key)">删除</span> -->
          </div>
        </template>
      </a-table>
      <!-- 分页器 -->
      <div v-show="dataSource.length > 0 && total > 10" class="pagination-bar">
        <div class="pagination-box">
          <a-pagination
            :current="currentPage"
            :page-size="pageSize"
            :total="total"
            :show-total="total => `共${total}条`"
            :show-size-changer="true"
            @change="onPageChange"
          />
          <div class="change-page-bg">
            <span>前往</span>
            <input
              class="change-page-input"
              type="text"
              @keyup="changePageKeyUp"
              @blur="changePageBlur"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, onUpdated, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import DatePicker from '@/components/datePicker/index.vue';
import { sendColumnsArr, receiveColumnsArr } from './tableColumns.js';
import { Interface } from '@/api/library/library.js';
import { message } from 'ant-design-vue';
import { changeData } from '@/utils/validate.js';
import store from '../../../../store';
const contentRefs = ref(null);
const props = defineProps({
  typeVal: {
    type: Number,
    default: 0
  }
});
const isLoading = ref(false);
const optionBtns = ref(localStorage.getItem('已归档'));
// ------------- 筛选 -------------
const beginTime = ref('');
const endTime = ref('');
const datePicker = ref(null);
function changeBeginTime(newBeginTime) {
  // console.log('接收到数据newBeginTime：', newBeginTime);
  beginTime.value = newBeginTime;
}
function changeEndTime(newEndTime) {
  // console.log('接收到数据newEndTime：', newEndTime);
  endTime.value = newEndTime;
}

const tagValue = ref();
const archivedLabelArr = ref([]); // 标签

const searchTitle = ref('title');
const searchTitleArr = ref([
  { value: 'title', text: '标题' },
  { value: 'number', text: '文号' }
]);
const keyword = ref('');
function searchBtnClick() {
  currentPage.value = 1;
  getDataList();
}
function toChange() {
  keyword.value = keyword.value.replace(/\s/g, '');
}
function resetBtnClick() {
  currentPage.value = 1;
  datePicker.value.resetTimes();
  beginTime.value = '';
  endTime.value = '';
  searchTitle.value = 'title';
  tagValue.value = null;
  keyword.value = '';
  getDataList();
}
// const batchBtnsArr = ref([
//   { btnName: '批量删除', svgName: 'btn_icon_delete', className: 'btn-icon-delete' },
//   { btnName: '批量下载', svgName: 'btn_icon_download', className: 'btn-icon-download' }
// ]);
// ------------- table -------------
// console.log(props.typeVal);
const columns = ref(props.typeVal === 0 ? sendColumnsArr : receiveColumnsArr);
// console.log(columns.value);
// const hasSelected = computed(() => selectedRowKeys.value.length > 0);
// const selectedRowKeys = ref([]);
// function batchBtnClick(btnIndex) {
//   if (selectedRowKeys.value.length === 0) return;
//   if (btnIndex === 0) {
//     console.log('批量删除');
//   } else if (btnIndex === 1) {
//     console.log('批量下载');
//   }
// }

// function onSelectChange(selectedKeys) {
//   console.log('onSelectChange:', selectedKeys);
//   selectedRowKeys.value = selectedKeys;
// }
const router = useRouter();
function gotoDetail(key) {
  router.push({
    name: 'examinePage',
    query: {
      processInstanceId: key.processInstanceId,
      documentTitle: key.documentTitle,
      type: 'archiveded'
    }
  });
}

// ------------- 分页器 -------------
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
function changePageKeyUp(event) {
  if (event.key === 'Enter') {
    event.target.blur();
  }
}
function changePageBlur(event) {
  if (/[0-9]/.test(event.target.value)) {
    // 3we5 => 35
    event.target.value = event.target.value.replace(/[^0-9]/g, '');
    currentPage.value = parseInt(event.target.value);
    let maxPage = parseInt(total.value / pageSize.value + 1);
    maxPage = maxPage > 0 ? maxPage : 1;
    if (currentPage.value > maxPage) {
      currentPage.value = maxPage;
    }
    getDataList();
    // 切换页数
  } else {
    event.target.value = '';
  }
}
function onPageChange(page, size) {
  // console.log(page, size);
  currentPage.value = page;
  pageSize.value = size;
  getDataList();
}
const dataSource = ref([]);
function getDataList() {
  isLoading.value = true;
  let params = {
    current: currentPage.value,
    size: pageSize.value,
    data: {}
  };
  // todo: 与后台确认标签字段tagId
  if (tagValue.value && tagValue.value.length > 0) {
    params.data.labelId = tagValue.value;
  }
  if (keyword.value.length > 0) {
    if (searchTitle.value === 'title') {
      params.data.documentTitle = keyword.value;
    } else if (searchTitle.value === 'number') {
      params.data.documentNum = keyword.value;
    }
  }
  if (beginTime.value.length > 0) {
    params.data.beginTime = changeData(beginTime.value);
  }
  if (endTime.value.length > 0) {
    params.data.endTime = changeData(endTime.value);
  }

  // console.log('params', params);
  Interface.GetArchivedList(params)
    .then(res => {
      // console.log('GetArchivedList', res);
      if (res.code === 200) {
        dataSource.value = res.data.records;
        dataSource.value.forEach(element => {
          element.createTime = changeData(element.createTime / 1000);
        });
        total.value = res.data.total;
      } else {
        message.error(res.msg);
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
}
function getLabels() {
  // let params = {
  //   current: 1,
  //   size: 99999,
  //   data: {} // 缺失报500
  // };
  Interface.DocumentLabelListNoPage()
    .then(res => {
      // console.log('LabelList', res);
      if (res.code === 200) {
        archivedLabelArr.value = res.data;
        archivedLabelArr.value.forEach(item => {
          item.label = item.labelName;
          item.value = item.id;
        });
      } else {
        message.error(res.msg);
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
}
onMounted(() => {
  getLabels();
  getDataList();
});
onUpdated(() => {});
let color = ref(store.state.user.setPrimaryColor);
</script>
<style lang="less" scoped>
@import './index.less';
/deep/ .rc-virtual-list-scrollbar-thumb {
  background: #dee0e3 !important;
  width: 6px !important;
}
.rc-virtual-list-scrollbar .rc-virtual-list-scrollbar-show {
  width: 6px !important;
}
.operation-normal {
  color: v-bind('color') !important;
}
</style>
